<template>
  <div class="app-container">
    <h1>WMC Components Demo</h1>
    
    <section class="demo-section">
      <h2>Basic Table Example</h2>
      <BasicTable
        :columns="columns"
        :data="tableData"
        :pagination="pagination"
        @page-change="handlePageChange"
        @size-change="handleSizeChange"
      />
    </section>
    <section>
      <TestTag :type=TagType.DANGER>123</TestTag>
    </section>
    <section>
      <TestAxios></TestAxios>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TestTag from '@/components/TestTag/index.vue'
import TestAxios from '@/components/TestAxios/index.vue'
import BasicTable from '@/components/BasicTable/index.vue'
import type { TableColumn, PaginationProps } from './components/BasicTable/types'
import { TagType } from './components/TestTag/type'

// 表格列配置
const columns: TableColumn[] = [
  {
    prop: 'date',
    label: 'Date',
    width: 180
  },
  {
    prop: 'name',
    label: 'Name',
    width: 180
  },
  {
    prop: 'address',
    label: 'Address'
  }
]

// 模拟数据
const tableData = ref([
  {
    date: '2024-02-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2024-02-02',
    name: 'Jack',
    address: 'No. 190, Grove St, Los Angeles'
  },
  {
    date: '2024-02-03',
    name: 'Rose',
    address: 'No. 191, Grove St, Los Angeles'
  },
  {
    date: '2024-02-04',
    name: 'William',
    address: 'No. 192, Grove St, Los Angeles'
  }
])

// 分页配置
const pagination = ref<PaginationProps>({
  total: 100,
  currentPage: 1,
  pageSize: 10,
  pageSizes: [10, 20, 30, 50]
})

// 分页事件处理
const handlePageChange = (page: number) => {
  pagination.value.currentPage = page
  console.log('Current page:', page)
}

const handleSizeChange = (size: number) => {
  pagination.value.pageSize = size
  console.log('Page size:', size)
}
</script>

<style lang="scss">
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--wmc-spacing-large);

  h1 {
    color: var(--wmc-primary-color);
    margin-bottom: var(--wmc-spacing-large);
    text-align: center;
  }

  .demo-section {
    background-color: var(--wmc-bg-color);
    border-radius: var(--wmc-border-radius-base);
    padding: var(--wmc-spacing-large);
    margin-bottom: var(--wmc-spacing-large);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    h2 {
      color: var(--wmc-text-color);
      margin-bottom: var(--wmc-spacing-large);
      font-size: var(--wmc-font-size-large);
    }
  }
}
</style>
